<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from "vue";
import { getRecommendAPI } from '@/api/home'
// 首页跳转进入时带type, 用 type 获取不同推荐页面的配置对象
// 包括1当前页面标题2当前页面需要发送的api请求
const urlMap = {
    1: { title: "特惠推荐", url: "/hot/preference" },
    2: { title: "爆款推荐", url: "/hot/inVogue" },
    3: { title: "一站买全", url: "/hot/oneStop" },
    4: { title: "新鲜好物", url: "/hot/new" }, // 后端未提供，暂用新鲜好物url
    5: { title: "新鲜好物", url: "/hot/new" },
};

// 进入页面准备数据

// 头部广告图
const bannerPicture = ref('')
// 特惠子分类
const subTypes = ref([])
// 商品列表
const goodsItems = ref({})
// 处理高亮问题, 当前激活 id
const activeId = ref(0)

onLoad(async ({ type }) => {
    // 根据type获取当前页面需要的配置
    const currentItem = urlMap[type]

    // onLoad 可以获取页面路由参数, 设置标题即可
    uni.setNavigationBarTitle({
        title: currentItem.title
    })

    // 根据当前的特惠分类, 获取广告图, 子分类和商品列表
    const { result } = await getRecommendAPI(currentItem.url)
    bannerPicture.value = result.bannerPicture
    subTypes.value = result.subTypes
    goodsItems.value = result.goodsItems

    // 默认子分类的第一个被高亮
    activeId.value = subTypes.value[0].id

})

// 加载更多
const loadMore = async () => {
    // 获取新数据
    const { result } = await getRecommendAPI(currentItem.url)
    console.log('获取新商品', result);
}

</script>

<template>
    <view class="viewport">
        <!-- 推荐封面 -->
        <view class="cover">
            <image :src="bannerPicture" />
        </view>
        <!-- tab栏 -->
        <view class="tabs">
            <text class="text" :class="{ active: item.id === activeId }" @click="activeId = item.id" v-for="item in subTypes"
                :key="item.id">
                {{ item.title }}
            </text>
        </view>
        <!-- 列表内容 -->
        <scroll-view scroll-y class="scroll-view" @scrolltolower="loadMore">
            <!-- 这里是子分类列表,需要遍历, 有多少个子分类就有多少个列表 -->
            <!-- 注意做判断,只有当前激活的那个可以显示 使用 v-show 实现 -->
            <view class="goods" v-for="item in subTypes" :key="item.id" v-show="item.id === activeId">
                <!-- 然后每个子分类又有自己的商品列表, 所以需要第二次嵌套遍历 -->
                <navigator hover-class="none" class="navigator" v-for="goods in item.goodsItems.items" :key="goods.id"
                    :url="`/pages/goods/index?id=${goods.id}`">
                    <image class="thumb" :src="goods.picture"></image>
                    <view class="name ellipsis">{{ goods.name }}</view>
                    <view class="price">
                        <text class="symbol">¥</text>
                        <text class="number">{{ goods.price }}</text>
                    </view>
                </navigator>
            </view>
            <view class="loading">正在加载...</view>
        </scroll-view>
    </view>
</template>
  
<style lang="scss">
page {
    height: 100%;
    background-color: #f4f4f4;
}

.viewport {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 180rpx 0 0;
    position: relative;
}

.cover {
    width: 750rpx;
    height: 225rpx;
    border-radius: 0 0 40rpx 40rpx;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
}

.tabs {
    display: flex;
    justify-content: space-evenly;
    height: 100rpx;
    line-height: 90rpx;
    margin: 0 20rpx;
    font-size: 28rpx;
    border-radius: 10rpx;
    box-shadow: 0 4rpx 5rpx rgba(200, 200, 200, 0.3);
    color: #333;
    background-color: #fff;
    position: relative;
    z-index: 9;

    .text {
        margin: 0 20rpx;
        position: relative;
    }

    .active {
        &::after {
            content: "";
            width: 40rpx;
            height: 4rpx;
            transform: translate(-50%);
            background-color: #27ba9b;
            position: absolute;
            left: 50%;
            bottom: 24rpx;
        }
    }
}

.scroll-view {
    flex: 1;
    overflow: hidden;
}

.goods {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 20rpx 20rpx;

    .navigator {
        width: 345rpx;
        padding: 20rpx;
        margin-top: 20rpx;
        border-radius: 10rpx;
        background-color: #fff;
    }

    .thumb {
        width: 305rpx;
        height: 305rpx;
    }

    .name {
        height: 88rpx;
        font-size: 26rpx;
    }

    .price {
        line-height: 1;
        color: #cf4444;
        font-size: 30rpx;
    }
}

.goods .symbol,
.goods .decimal {
    font-size: 70%;
}
</style>